<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三级联动</title>
</head>

<body>
    <select id="one" onchange="one(),three()"></select>
    <select id="two" onchange="two(),three()"></select>
    <select id="three" onchange="three()"></select>
    <script>
        var select = [
            {
                province: '请选择省',
                child: [
                    {
                        city: '请选择市',
                        child: [
                            {
                                county: '请选择县'
                            }
                        ]
                    }
                ]
            },
            {
                province: '河南',
                child: [
                    {
                        city: '请选择市',
                        child: [
                            {
                                county: '请选择县'
                            },
                        ]
                    },
                    {
                        city: '郑州市',
                        child: [
                            {
                                county: '请选择县,中原区,二七区,管城区,金水区,上街区,惠济区,中牟县,巩义市,荥阳市,新密市,新郑市,登封市'
                            }
                        ],
                    },
                    {
                        city: '开封市',
                        child: [
                            {
                                county: '请选择县,鼓楼区,龙亭区,禹王台区,顺河区,祥符区,尉氏县,兰考县,杞县,通许县'
                            }
                        ],
                    },
                    {
                        city: '洛阳市',
                        child: [
                            {
                                county: '请选择县,涧西区,西工区,老城区,瀍河回族区,洛龙区,吉利区，孟津县,新安县,宜阳县,伊川县,洛宁县,嵩县,栾川县,汝阳县,偃师市'
                            }
                        ],
                    },
                    {
                        city: '周口',
                        child: [
                            {
                                county: '请选择县,项城市,沈丘县,太康县,郸城县,淮阳县,商水县,西华县,扶沟县'
                            }
                        ],
                    },
                ],
            },
            {
                province: '安徽',
                child: [
                    {
                        city: '请选择市',
                        child: [
                            {
                                county: '请选择县'
                            }
                        ]
                    },
                    {
                        city: '合肥',
                        child: [
                            {
                                county: '请选择县,蜀山区,瑶海区,庐阳区,包河区,长丰县,肥东县,肥西县,庐江县,巢湖市'
                            },
                        ]
                    }
                ],
            },
        ];
        function province() {
            for (let i = 0; i < select.length; i++) {
                let pro = document.createElement("option");
                pro.innerHTML = select[i].province;
                document.getElementById("one").appendChild(pro);
            }
            document.getElementById("two").innerHTML = "<option>" + select[0].child[0].city + "</option>";
            document.getElementById("three").innerHTML = "<option>" + select[0].child[0].child[0].county + "</option>";
        }
        province();
        function one() {
            document.getElementById("two").innerHTML = "";
            for (let i = 0; i < select.length; i++) {
                if (select[i].province == document.getElementById("one").value) {
                    for (let a = 0; a < select[i].child.length; a++) {
                        let ci = document.createElement("option");
                        ci.innerHTML = select[i].child[a].city;
                        document.getElementById("two").appendChild(ci);
                    }
                }
            }
        }
        function two() {
            document.getElementById("three").innerHTML = "";
            for (let i = 0; i < select.length; i++) {
                if (select[i].province == document.getElementById("one").value) {
                    for (let a = 0; a < select[i].child.length; a++) {
                        if (select[i].child[a].city == document.getElementById("two").value) {
                            let sum = select[i].child[a].child[0].county.split(",");
                            for (let b = 0; b < sum.length; b++) {
                                let cc = document.createElement("option");
                                cc.innerHTML = sum[b];
                                document.getElementById("three").appendChild(cc);
                            }
                        }
                    }
                }
            }
        }
    </script>
</body>

</html>